<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#main {
				margin: 0 auto;
				width: 900px;
				overflow: hidden;
				position: relative;
				height: 400px;
			}

			.slider {
				height: 400px;
				position: absolute;
			}

			.slider li {
				height: 400px;
				width: 900px;
				float: left;
				display: block;
			}

			.banner_img {
				height: 400px;
				width: 900px
			}

			.select_left {
				position: absolute;
				height: 60px;
				width: 60px;
				left: 20px;
				top: 50%;
				margin-top: -30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.select_right {
				position: absolute;
				height: 60px;
				width: 60px;
				right: 20px;
				top: 50%;
				margin-top: -30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.select_left img,
			.select_right img {
				height: 30px;
				width: 30px;
				opacity: 0.8;
			}

			.dots {
				display: flex;
				align-items: center;
				margin: 0 auto;
				position: absolute;
				bottom: 20px;
				width: 100%;
				justify-content: center;
			}

			.dot {
				width: 13px;
				height: 13px;
				background-color: white;
				border-radius: 50%;
				box-sizing: border-box;
				margin: 6px;
			}

			.select_dot {
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<ul class="slider" id="banner">
				
			</ul>
			<div class="select_button">
				<div class="select_left">
					<img src="img/xz.png">
				</div>
				<div class="select_right">
					<img src="img/xy.png">
				</div>
			</div>
			<div class="dots">
				<!-- <div class="dot select_dot">

				</div>
				<div class="dot">

				</div>
				<div class="dot">

				</div>
				<div class="dot">

				</div>
				<div class="dot">

				</div> -->
			</div>
		</div>
		<script type="text/javascript">
			$(document).ready(function() {
				var images=[
					{
						id:1,
						url:"img/1.png"
					},
					{
						id:2,
						url:"img/2.png"
					},
					{
						id:3,
						url:"img/3.png"
					},
					{
						id:4,
						url:"img/4.png"
					},
					{
						id:5,
						url:"img/5.png"
					},
					{
						id:4,
						url:"img/4.png"
					},
					{
						id:5,
						url:"img/5.png"
					}
				]
				var imgWidth
				var banner=document.getElementById("banner");
				var dots=document.getElementsByClassName('dots');
				for(var i=0	;i<images.length;i++){
					var li=document.createElement("li");
					banner.appendChild(li);
					console.log(li)
					var a=document.createElement("a");
					li.appendChild(a);
					var img=document.createElement("img");
					img.src=images[i].url;
					img.className='banner_img';
					a.appendChild(img);
					imgWidth = $(".slider li")[0].offsetWidth;
					$(".dots").append("<div class='dot'></div>");
					$(".dot").eq(0).addClass("select_dot").siblings().removeClass("select_dot");
				}
				console.log($(".dot")[0])
				
			
				var numb =images.length;
				
				var sliderWidth = numb * imgWidth;
				$(".slider").css({
					width: sliderWidth + 'px'
				})
				console.log(imgWidth)
				console.log(numb)
				var curindex = 0;
				var width = 900;
				var timer
				
				$(".select_right").click(function() {
					curindex++;
					if(curindex<numb){
						$(".slider").css({left:-width*curindex+"px"})
					}else{
						curindex=0;
						$(".slider").css({left:-width*curindex+"px"})
					}
					$(".dot").eq(curindex).addClass("select_dot").siblings().removeClass("select_dot");
					$(".slider a").eq(curindex).animate({"opacity":0},1000).animate({"opacity":1},1000);
					// $(".slider a").eq(curindex).fadeOut(500);
					// $(".slider a").eq(curindex).fadeIn(500);
				})
				$(".select_left").click(function() {
					
					if (curindex > 0) {
						curindex--;
						$(".slider").css({
							left: -width * curindex + "px"
						})
					} else {
						curindex = numb;
						curindex--;
						$(".slider").css({
							left: -width * curindex + "px"
						})
					}
					$(".dot").eq(curindex).addClass("select_dot").siblings().removeClass("select_dot");

					$(".slider a").eq(curindex).animate({"opacity":0},1000).animate({"opacity":1},1000);
				})
				autoPlay();

				function autoPlay() {
					timer = setInterval(res => {
						curindex++;
						if (curindex < numb) {
							$(".slider").css({
								left: -width * curindex + "px"
							})
						} else {
							curindex = 0;
							$(".slider").css({
								left: -width * curindex + "px"
							})
						}
						$(".dot").eq(curindex).addClass("select_dot").siblings().removeClass("select_dot");

						$(".slider a").eq(curindex).animate({"opacity":0},1000).animate({"opacity":1},1000);

					}, 3000)
				}
				$(".dot").click(function() {
					
					var index = $(this).index();
					console.log("index", index)
					curindex = index;
					$(".slider").css({
						left: -width * curindex + "px"
					})
					$(this).addClass("select_dot").siblings().removeClass("select_dot");
					$(".slider a").eq(curindex).animate({"opacity":0},1000).animate({"opacity":1},1000);
				})



			})
		</script>
	</body>
</html>
